<template>
	<view>
		<view class="nav">
			<image src="../../../static/back.png" mode="" class="back" @click="backto()"></image>
			<view class="title">活动报名</view>
		</view>
		<view class="information">
			<view class="tag">
				活动信息
			</view>
			<view class="" style="margin-bottom: 7rpx;">
				<view class="before">活动名称：</view>
				<view class="after">{{infos.title}}</view>
			</view>
			<view class="" style="margin-bottom: 7rpx;">
				<view class="before">活动时间：</view>
				<view class="after">{{startTime}}</view>
			</view>
			<view class="" style="margin-bottom: 7rpx;">
				<view class="before">活动地点：</view>
				<view class="after">{{infos.address}}</view>
			</view>
		</view>
		<u-line color="gray"></u-line>
		<form >
			<view class="myInformation">
				<view class="tag">
					个人信息
				</view>
				<view class="before">
					昵称：
				</view>
				<view class="moren">
					{{userinfo.username}}
				</view>
				<!-- <input type="text" /> -->
				<view class="before">
					请用一段文字描述一下自己：
				</view>
				<view class="text">
					<textarea  v-model="description" placeholder="必填哦!"></textarea>
				</view>
			</view>
			<button class="sub"  @click="onsubmit(infos)" >
				提交
			</button>
			
		</form>
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
	export default {
		onLoad(e){
			this.infos = JSON.parse(e.details)
			this.startTime = this.infos.startTime.replace('T', ' ');
			console.log(this.infos.title)
		    this.userinfo=uni.getStorageSync("userInfo")
			
			
		},
		data() {
			return {
				infos:{},
				startTime:"1月25日 11：00一18：00",
				location:"郑州市二七区",
				userinfo:{},
				description:"",
				
			};
		},
		methods:{
			backto(e){
				uni.navigateBack(e);
			},
			onsubmit(){
				if (!this.description.trim()) {  
						uni.showToast({
							title:'请先介绍下自己',
							position:'center',
							icon:'none',
							duration:1200
						})
				        return; // 阻止继续执行后续代码  
				      } 
				else{
					this.showError = false; // 清除之前的错误消息（如果有的话）
					this.$H.post("joinActivity/signUp?id="+this.infos.id+"&description="+this.description).then(res=>{
						if(res.code==200){
							uni.showToast({
							title:'报名成功',
							position:'center',
							duration:1200
							})
							setTimeout(function () {
								uni.navigateBack();
						    }, 1200)
						}
						else{
							uni.showToast({
								title:res.msg,
								position:'center',
								icon:'none',
								duration:1200
							})
						}
					})
				}				
					}
					
				}
			}
		
	
</script>

<style lang="scss">
.nav{
	width: 100%;
	height: 130rpx;
	position: relative;
	background: linear-gradient(to right,#fedcc6,#fff0cf);
	
	.back{
		width: 45rpx;
		height: 40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
		top: 60rpx;
		display: inline-block;
	}
	.title {
		font-weight: bold;
		text-align: center;
		display: inline-block;
		font-size: 32rpx;
		position: absolute;
		top:60rpx;
		right: 320rpx;
	}	
}
.information {
	width: 700rpx;
	height: 230rpx;
	border-radius: 40rpx;
	background-color: #fff;
	margin-left: 25rpx;
	margin-top: 60rpx;
	margin-bottom: 40rpx;
	.tag {
		background-color: rgba(255, 222, 157, 1);
		position: relative;
		width: 140rpx;
		height: 80rpx;
		top: -30rpx;
		left: -25rpx;
		font-weight: bold;
		color: #5a5a5a;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		
	}
	.before {
		display: inline-block;
		font-size: 25rpx;
		margin-left: 20rpx;
		font-weight: bold; 
		color: #5a5a5a;
		
	}
	.after{
		display: inline-block;
		font-size: 25rpx;
		color: #787878;
	}
}
.myInformation {
	width: 700rpx;
	height: 700rpx;
	border-radius: 40rpx;
	background-color: #fff;
	margin-left: 25rpx;
	margin-top: 60rpx;
	.tag {
		background-color: rgba(255, 222, 157, 1);
		position: relative;
		width: 140rpx;
		height: 80rpx;
		top: -30rpx;
		left: -25rpx;
		font-weight: bold;
		color: #5b5b5b;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.before {
		font-size: 25rpx;
		margin-left: 20rpx;
		font-weight: bold; 
		color: #5a5a5a;
		margin-bottom: 15rpx;
	}
	.moren {
		background-color: #f3f3f3;
		margin-bottom: 20rpx;
		width: 200rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		height: 50rpx;
		Padding: 12.5rpx;
	}
	.text {
		background-color: #f3f3f3;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		Padding: 12.5rpx;
		margin-right: 20rpx;
	}
}
.sub {
	background: linear-gradient(to right,#ffd6af,#ffa773);
	color: #fff;
	height: 70rpx;
	width: 270rpx;
	margin-left: 230rpx;
	text-align: center;
	font-weight: bold;
	font-size: 30rpx;
	margin-top: 80rpx;
	margin-bottom: 80rpx;
	border-radius: 20rpx;
	line-height: 70rpx;
}
</style>
